<div>
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="'BasicSetup' | localize" [description]="Activity.id + Activity.name">
            <div role="actions"></div>
        </sub-header>


        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">


                    <form #BasicActivityForm="ngForm" name="CommonForm" novalidate (ngSubmit)="save()"
                        autocomplete="off">
                        <div class="modal-body">
                            <tabset class="tab-container tabbable-line">
                                <tab heading="{{l('BasicSetup')}}" class="pt-5" customClass="m-tabs__item icon-jibenxinxi"
                                    (selectTab)="changeSetup('basic')" [busyIf]="busy||saving">
                                    <div class="row">
                                        <div class="col-9">
                                            <div class="row">
                                                <div class="form-group col-6">
                                                    <label>{{l("name")}} *</label>
                                                    <input #personalNameInput="ngModel" class="form-control" type="text"
                                                        name="name" required [(ngModel)]="Activity.name"
                                                        placeholder="{{l('name')}}">
                                                    <validation-messages [formCtrl]="personalNameInput">
                                                    </validation-messages>
                                                </div>

                                                <div class="form-group col-6">
                                                    <label>{{l("ActivitySponsor")}}</label>
                                                    <input class="form-control" type="text" name="organizer"
                                                        [(ngModel)]="Activity.organizer">
                                                </div>

                                            </div>
                                            <div class="row">



                                                <div class="form-group col-6">
                                                    <label>{{l("ActivityAddress")}}</label>
                                                    <input class="form-control" type="text" name="address"
                                                        [(ngModel)]="Activity.address">
                                                </div>

                                                <div class="form-group col-6" *ngIf="showPicker">
                                                    <label>{{l("startDate")}}-{{l('endDate')}}</label>
                                                    <date-range-picker #Dateranger2 needInitDate="true"
                                                        name="Dateranger2" [(startDate)]="Activity.openDate"
                                                        [(endDate)]="Activity.endDate" rangeMode="future"
                                                        [allowFutureDate]="true">
                                                    </date-range-picker>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-6">
                                                    <label>{{l('PublicAccount')}}</label>
                                                    <div class="form-group ">
                                                        <div class="input-group">
                                                            <select class="form-control"
                                                                [(ngModel)]="Activity.weChatAppID" name="weChatAppID">
                                                                <option [value]="type.weixinAppID"
                                                                    *ngFor="let type of wxList">{{type.nickName}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group col-6">
                                                    <label>{{l('taobaoAccount')}}</label>
                                                    <div class="form-group ">
                                                        <div class="input-group">
                                                            <select class="form-control"
                                                                [(ngModel)]="Activity.taobaoSellerID"
                                                                name="taobaoSellerID">
                                                                <option [value]="type.taobao_user_id"
                                                                    *ngFor="let type of tbList">
                                                                    {{type.taobao_user_nick}}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="form-group col-3" style="position:relative;">
                                                    <label class="checkbox checkbox-primary"
                                                        style="position:absolute;top:50%;">
                                                        <input
                                                            [(ngModel)]="Activity.isNeedRegister" type="checkbox"
                                                            name="isNeedRegister" />{{l("NeedRegister")}}
                                                        <span></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-3" style="position:relative;">
                                                    <label class="checkbox checkbox-primary"
                                                        style="position:absolute;top:50%;">
                                                        <input
                                                            [(ngModel)]="Activity.isNeedValidate" type="checkbox"
                                                            name="isNeedValidate" />{{l("NeedValidate")}}
                                                        <span></span>
                                                    </label>
                                                </div>
                                                <div class="form-group col-3" style="position:relative;">
                                                    <label class="checkbox checkbox-primary"
                                                        style="position:absolute;top:50%;">
                                                        <input [(ngModel)]="Activity.isPublic"
                                                            type="checkbox" name="isPublic" />{{l("ifFormalUse")}}
                                                        <span></span>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="row" style="margin-top:20px;">
                                                <div class="form-group col-12">
                                                    <label>{{l("ActivityDescription")}}</label>
                                                    <input class="form-control" type="text" name="description"
                                                        [(ngModel)]="Activity.description">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <label>{{l("ActivityRule")}}</label>
                                                    <textarea class="form-control" rows="7" name="rules"
                                                        [(ngModel)]="Activity.rules"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="control-label">{{l("logo")}}</label>
                                                        <app-fileupload [fileUrl]="Activity.activityLogoPath"
                                                            (onUpLoadEvent)="logoOnUpload($event)" accept="image/*">
                                                        </app-fileupload>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </tab>
                                <tab heading="{{l('AdvancedSetup')}}" class="pt-5" customClass="m-tabs__item icon-gaojishezhi"
                                    (selectTab)="changeSetup('advanced')">
                                </tab>
                                <tab heading="{{l('LotterySetup')}}" class="pt-5" customClass="m-tabs__item icon-jiangxiangshezhi"
                                    (selectTab)="changeSetup('prize')">
                                </tab>
                                <tab *ngIf="!deviceId" class="pt-5" heading="{{l('GameSetup')}}"
                                    customClass="m-tabs__item icon-youxiguanli" (selectTab)="changeSetup('game')">
                                </tab>
                            </tabset>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary blue"
                                [disabled]="!BasicActivityForm.form.valid" [buttonBusy]="saving"
                                [busyText]="l('SavingWithThreeDot')">
                                <i class="fa fa-save"></i>
                                <span>{{l("Save")}}</span>
                            </button>
                            <button type="button" class="btn btn-primary blue"
                                [disabled]="!BasicActivityForm.form.valid" [buttonBusy]="saving"
                                [busyText]="l('SavingWithThreeDot')" (click)="saveAsTemplate()">
                                <i class="fa fa-save"></i>
                                <span>{{l("SaveAsTemplate")}}</span>
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>